<template>
    <div id="account">

        <h3>单据编码规则</h3>
        <div>
            <div style="float: right;">
                <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
                <!-- <el-button type="danger">删除</el-button> -->
            </div>
        </div>
        <div style="clear: both;"></div>
        <hr style="margin-top: 10px">
        <div class="account-content" style="margin-top: 10px;">
            <el-table height="500px" :data="list" border style="width: 100%;font-size: 13px;margin-left: 20px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="receiptTypeId" label="单据类型" width="200">
                </el-table-column>
                <el-table-column prop="receiptName" label="规则名称" width="200">
                </el-table-column>
                <el-table-column prop="example" label="编号规则" width="200">
                </el-table-column>
                <el-table-column prop="isDefault" label="默认状态" width="200">
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.receiptId)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="updateType(scope.row.receiptId)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="position: relative;left: 700px;bottom: 30px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
        <el-dialog width="800px" top="100px" title="新增单据编码规则" :visible.sync="dialogFormVisible">
            <AddRules />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="flush()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="800px" top="100px" title="修改单据编码规则" :visible.sync="chooseType">
            <div id="addProvider">
                <table>
                    <tr>
                        <td>单据类型</td>
                        <td><el-select v-model="receipt.receiptTypeId" placeholder="类别">
                                <el-option v-for="item in typelist" :key="item.receiptTypeId"
                                    :label="item.receiptTypeName" :value="item.receiptTypeId"></el-option>

                            </el-select></td>
                        <td>规则名称</td>
                        <td><el-input v-model="receipt.receiptName"></el-input></td>
                    </tr>
                    <br>
                    <tr>
                        <td>编码前缀</td>
                        <td><el-input v-model="receipt.receiptPre"></el-input></td>
                    </tr>
                    <br>
                    <tr>
                        <td>范例</td>
                        <td><el-input v-model="getExample" disabled></el-input></td>
                        <td><input type="checkbox" @change="isdefault()">是否设为默认</td>

                    </tr>
                    <br>
                    <tr>
                        <td></td>
                        <td><el-button style="margin-left: 170px" type="primary" @click="update()">修改</el-button></td>
                    </tr>
                    <br>
                </table>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="chooseType = false">取 消</el-button>
                <el-button type="primary" @click="flush1()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddAccount from './AddAccount.vue';
import AddCustomerType from './AddCustomerType.vue';
import AddOut from './AddOut.vue';
import AddPayType from './AddPayType.vue';
import AddProviderType from './AddProviderType.vue';
import AddRules from './AddRules.vue';

export default {
    name: 'Account',
    components: {
        AddAccount,
        AddProviderType,
        AddRules
    },
    data() {
        return {
            dialogFormVisible: false,
            //分页参数
            list: [],
            receipt: {
                now: "",
                receiptName: "",
                receiptTypeId: "",
                receiptPre: "",

                example: "",
                isDefault: 0
            },
            example1: "001",
            receiptId: "",
            chooseType: false,
            typelist: []
        }

    },
    computed: {
        getExample() {
            return this.receipt.example = this.receipt.receiptPre + this.receipt.now + this.example1
        }
    },
    methods: {
        handleClick: function (receiptId) {
            if (confirm("是否删除")) {
                this.axios({
                    url: "/info/receipt/delete",
                    params: {
                        receiptId: receiptId,
                    }
                }).then(rs => {
                    console.log(rs)
                    if (rs.data.code === 200) {
                        this.searchPage()
                    } else {
                        alert("删除失败")
                    }
                })
            } else {

            }
        },
        flush: function () {
            this.dialogFormVisible = false
            this.searchPage()
        },
        flush1: function () {
            this.chooseType = false
            this.searchPage()
        },
        isdefault: function () {
            this.receipt.isDefault = 1
        },
        update: function () {
            alert(this.receiptId)
            if (this.receipt.receiptName === "") {
                alert("规则名称不能为空")
                return
            }
            if (this.receipt.receiptTypeId === 0) {
                alert("请选择单据类型")
                return
            }
            if (this.receipt.receiptPre === "") {
                alert("编码前缀不能为空")
                return
            }
            this.axios.post(
                "/info/receipt/update",
                this.receipt
            ).then(rs => {
                console.log(rs)
                if (rs.data.code === 200) {
                    alert("修改成功")
                } else {
                    alert("类别已存在")
                }
            })
        },
        updateType: function (receiptId) {
            this.receiptId = receiptId
            // alert(typeId)
            this.chooseType = true
            this.axios({
                url: "/info/receipt/selectById",
                params: {
                    receiptId: receiptId
                }
            }).then(rs => {
                this.receipt = rs.data.clear
                var now = new Date();
                var year = now.getFullYear();
                // 获取月份（注意月份是从0开始的，所以需要加1）
                var month = now.getMonth() + 1;
                // 获取日期
                var day = now.getDate();
                this.receipt.now = year + "" + month + "" + day
                console.log(this.receipt.now)
                console.log(rs)
            })
        },
        searchPage: function () {
            this.axios({
                url: "/info/receipt/selectAll",

            }).then(rs => {
                console.log(rs)
                this.list = rs.data.list

            })
        },
        getType: function () {
            this.axios({
                url: "/info/receiptType/selectAll"
            }).then(rs => {
                console.log(rs)
                this.typelist = rs.data.list
                console.log(this.typelist)
            })
        }
    },
    created: function () {
        this.getType()
        this.searchPage()
    }
}
</script>

<style scoped>
#account {
    width: 100%;
    height: 100%;
}

.account-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.account-top h3 {
    display: inline-block;
    margin-right: 1000px;
}

.account-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}
</style>